<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item>
                <el-breadcrumb-item>书籍封面上传</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="content-title">
                <el-input placeholder="请输入书籍编号" style="width: 200px" v-model="bookId"></el-input>
            </div>
            <el-upload
                ref="upload"
                class="upload-demo"
                :limit = "parseInt('1')"
                drag
                action="http://localhost:8081/booksys/file/uploadAuthorHeader"
                :http-request="commitFile"
            >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
            </el-upload>
        </div>
    </div>
</template>

<script>
export default {
    name: 'upload',
    data: function () {
        return {
            defaultSrc: require('../../assets/img/img.jpg'),
            imgSrc: '',
            cropImg: '',
            dialogVisible: false,
            bookId: ''
        };
    },
    methods: {
        commitFile(params) {
            if (this.bookId == '') {
                this.$message.error("书籍编号不能为空");

            } else {
                let fd = new FormData();
                fd.append('file', params.file);
                this.$http
                    .post('http://localhost:8081/booksys/file/uploadBookCover/'+this.bookId, fd, {
                        headers: { 'Content-Type': 'multipart/form-data' }
                    })
                    .then((res) => {
                        console.log(res.data);
                        if(res.data.status==0){
                            this.$message.error(res.data.message);
                        }else{
                            this.$message.success("书籍封面上传成功");
                        }
                        
                    });
            }
        }
    },
    created() {
        this.cropImg = this.defaultSrc;
    }
};
</script>

<style scoped>
.content-title {
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
.pre-img {
    width: 100px;
    height: 100px;
    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 5px;
}
.crop-demo {
    display: flex;
    align-items: flex-end;
}
.crop-demo-btn {
    position: relative;
    width: 100px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    margin-left: 30px;
    background-color: #409eff;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
}
.crop-input {
    position: absolute;
    width: 100px;
    height: 40px;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}
</style>